<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/H_home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>角色列表</el-breadcrumb-item>
		  <el-breadcrumb-item>用户权限分配</el-breadcrumb-item>
		</el-breadcrumb>
		
		<el-card class="box-card">
			<el-row>
				<el-col :span="6">
					<div>
					  <el-input placeholder="请输入内容" v-model="queryInfo.rolename">
					    <el-button slot="append" icon="el-icon-search" @click.native="selectAll"></el-button>
					  </el-input>
					</div>
				</el-col>
				<el-col :span="3">
					<el-button type="primary">添加角色</el-button>
				</el-col>
			</el-row>
			
			<el-table
			      border
			     :data="roleList"
			     style="width: 100%">
				   <el-table-column label="编号"   type="index"   width="50">    </el-table-column>
				  <!-- <el-table-column   type="expand"> 
						<template slot-scope="scope">
							<el-row v-for="it in scope.row.powers" style="margin: 20px; border-bottom: 1px solid black;display:flex;align-items:center;">
								<el-col :span="6">
									<el-tag closable>{{it.name}}</el-tag>
								</el-col>
								<el-col :span="18" >
									<el-row  v-for="itt in it.sysPowers" style="margin: 20px;">
										<el-col :span="8">
											<el-tag type="success" closable>{{it.name}}</el-tag>
										</el-col>
									</el-row>
								</el-col>
							</el-row>
						</template>
					 </el-table-column> -->
			     <el-table-column   prop="id"   label="编号"   width="180">   </el-table-column>
			     <el-table-column   prop="name"  label="职务名称">   </el-table-column>
				  <el-table-column    label="操作"> 
				  <template slot-scope="scope">
						<el-tooltip content="编辑" placement="bottom" effect="light">
						   <el-button type="primary" icon="el-icon-edit" ></el-button>
						</el-tooltip>
						<el-tooltip content="分配权限" placement="bottom" effect="light">
						   <el-button type="warning" icon="el-icon-star-off" @click="fr(scope.row)" >分配权限</el-button>
						</el-tooltip>
						<el-tooltip content="删除" placement="bottom" effect="light">
						   <el-button type="danger" icon="el-icon-delete"  ></el-button>
						   
						</el-tooltip>
					</template>
				  </el-table-column>
			 </el-table>
			
			 <el-pagination
			       @current-change="handleCurrentChange"
			       :current-page.sync="this.page.pageNum"
			       :page-size="3"
			       layout="total, prev, pager, next"
			       :total="this.page.total">
			     </el-pagination>
		</el-card>
		
	</div>
</template>

<script>
	import qs from 'qs'
	export default{
		data(){
			return{
				powerData: [],
				defaultProps: {
					children: 'sysPowers',
					label: 'name'
				},
				checkKeys:[],
				powerdialogFormVisible:false,
				page:{
					pages:'',
					total:'',
					pageNum:'',
					nextPage:'',
					prePage:''
				},
				queryInfo:{
					rolename:'',
					pageNum:1
				},
				roleList:{}
				
			}
		},
		mounted() {
			this.selectAll()
		},
		methods:{
			async fr(role){
				this.powerdialogFormVisible=true
				var res=await this.$http.get("vuePowerTree");
				this.powerData=res.data
				console.log(role)
				this.checkKeys=[]
				
				for(var i = 0;i<role.powers.length;i++){
					var p=role.powers[i]
					alert(p.id)
					for(var j = 0;j < p.sysPowers.length;j++){
						var pp=p.sysPowers[j]
						this.checkKeys.push(pp.id)
					}
				}
			},
			async selectAllRoles(){
				var params=new URLSearchParams()
				params.append("pageNum",this.queryInfo.pageNum);
				params.append("name",this.queryInfo.rolename)
				var res=await this.$http.post("selectAllRoles",params);
				this.page.pages=res.data.pages
				this.page.total=res.data.total
				this.page.pageNum=res.data.pageNum
				this.page.nextPage=res.data.nextPage
				this.page.prePage=res.data.prePage
				this.roleList=res.data.list
			},
			handleCurrentChange(current){
				this.queryInfo.pageNum=current
				this.selectAll()
			},
			getNewPower() {
				//获取所有选中及半选的内容
				const keys = [
					...this.$refs.treeRef.getCheckedKeys(),
					...this.$refs.treeRef.getHalfCheckedKeys()
				]
				
				alert(keys.join(","));
				alert(this.rid);
				
			}
			
		}
	}
</script>

<style>
</style>
